﻿var projData = [{
    title: '北车埃及空车体项目',
    batch: "项目批次：V10<br/>批次创建时间:2016/1/4 16:05:43<br/>批次货量：300000<br/>业务操作环节：集港-报关-装船-卸船",
    biz: '',
    source: '天津新港',
    dest: '亚历山大港',
    value: 906090,
    manager: '丁一鸣',
    mediaType: 'gif',// 'video',
    media: 'images/s5/马尔代夫友谊大桥项目.gif'
}, {
    title: '特变电工安哥拉SK输变电建设项目',
    batch: "项目批次：TBEA-107<br/>批次创建时间:2016/11/10 10:36:49<br/>批次货量：338905<br/>业务操作环节：集港-报关-装船-卸船-装车-交付",
    biz: '',
    source: '青岛,上海,天津',
    dest: '罗安达',
    value: 500561.08,
    manager: '原伟清',
    mediaType: 'gif',
    media: 'images/s5/安哥拉项目.gif'
}];

function showProjectDetail01() {
    jzcode.event.sendEvent('show-proj-0', null);
}

function showProjectDetail02() {
    jzcode.event.sendEvent('show-proj-1', null);
}
function showLZH() {
    jzcode.event.sendEvent('show-lzh', null);
}

function showProjectDetail(index){
    $('#projDetailLayer').show();

    $('#projDetailLayer').css('backgroundImage', 'url("./images/s5/s5-proj' + index + '-detail.png")');
    $('#projDetailLayer').css('top', 150);
    $('#projDetailLayer').css('height', 888);

    $('#projTitle').html(projData[index].title);
    $('#projManager').html(projData[index].manager);
    $('#projSource').html(projData[index].source);
    $('#projDest').html(projData[index].dest);
    $('#projValue').html(projData[index].value);
    $('#projBiz').html('');
    $('#projBatch').html(projData[index].batch);
    if (projData[index].mediaType == 'video') {
        $('#popupLayer').empty();
        var video = $('<video id="video1" src="' + jzcode.res.getUrl(projData[index].media) + '" autoPlay loop width="360" height="240" style="position:absolute; left:50px; top:164px;"></video>');
        $('#popupLayer').append(video);
    } else if (projData[index].mediaType == 'gif') {
        $('#popupLayer').empty();
        var video = $('<img id="gif1" src="' + jzcode.res.getUrl(projData[index].media) + '" style="width:360px; height:240px; position:absolute; left:50px; top:164px;"></img>');
        $('#popupLayer').append(video)
    }
}
function showLZHDetail() {
    $('#projDetailLayer').show();

    $('#projDetailLayer').css('backgroundImage', 'url("./images/s5/s5-lzh-detail.png")');
    $('#projDetailLayer').css('top', 150);
    $('#projDetailLayer').css('height', 888);

    //$('#projTitle').html(projData[index].title);
    //$('#projManager').html(projData[index].manager);
    //$('#projSource').html(projData[index].source);
    //$('#projDest').html(projData[index].dest);
    //$('#projValue').html(projData[index].value);
    //$('#projBiz').html('');
    //$('#projBatch').html(projData[index].batch);
    $('#popupLayer').empty();
    var video = $('<img id="gif1" src="' + jzcode.res.getUrl('images/s5/s5-lzh-media.gif') + '" style="width:360px; height:240px; position:absolute; left:50px; top:164px;"></img>');
    $('#popupLayer').append(video)
}
function hideProjectDetail() {
    $('#projDetailLayer').hide();
    $('#popupLayer').empty();
}

var s5_interactive = {
    isShowLZH: false,
    isShowProj0: false,
    isShowProj1: false,
    showLZH: function (show) {
        this.isShowLZH = show;
        this.isShowProj0 = false;
        this.isShowProj1 = false;
        if (show) {
            option.graphic = {
                elements: [{
                    id: 'popup-lzh',
                    type: 'image',
                    left: 450,
                    top: 110,
                    style: {
                        image: './images/s5/s5-popup-lzh.png'
                    },
                    z: 10
                }]
            };
            myChart.setOption(option);
            showLZHDetail();
        } else {
            hideProjectDetail();
            option.graphic = {
                elements: [{
                    id: 'popup-lzh',
                    $action: 'remove'
                }]
            };
            myChart.setOption(option);
        }
    },
    showProj0: function (show) {
        this.isShowProj0 = show;
        this.isShowProj1 = false;
        if (show) {
            showProjectDetail(0);
            g_project_selected = ['MALE', '重庆','上海','舟山'];
            g_selected_links = [['重庆', 'MALE'], ['上海', 'MALE'], ['舟山', 'MALE']];
            option.series[2].data = s5.convertSelectedCityData();
            option.series[3].data = s5.convertSelectedLinkData();
            option.graphic = {
                elements: [{
                    id: 'popup-proj0',
                    type: 'image',
                    left: 649,
                    top: 170,
                    style: {
                        image: './images/s5/s5-popup-proj0.png'
                    },
                    z: 10
                }, {
                    id: 'popup-proj1',
                    $action: 'remove'
                }, {
                    id: 'popup-lzh',
                    $action: 'remove'
                }]
            };
            myChart.setOption(option);
        } else {
            hideProjectDetail();
            g_project_selected = [];
            g_selected_links = [];
            option.series[2].data = [];
            option.series[3].data = [];
            option.graphic = {
                elements: [{
                    id: 'popup-proj0',
                    $action: 'remove'
                }]
            };
            myChart.setOption(option);
        }
    },
    showProj1: function (show) {
        this.isShowProj1 = show;
        this.isShowProj0 = false;
        if (show) {
            showProjectDetail(1);
            g_project_selected = ['罗安达', '连云港'];
            g_selected_links = [['连云港', '罗安达']];
            option.series[2].data = s5.convertSelectedCityData();
            option.series[3].data = s5.convertSelectedLinkData();
            option.graphic = {
                elements: [{
                    id: 'popup-proj1',
                    type: 'image',
                    left: 649,
                    top: 170,
                    style: {
                        image: './images/s5/s5-popup-proj1.png'
                    },
                    z: 10
                }, {
                    id: 'popup-proj0',
                    $action: 'remove'
                }, {
                    id: 'popup-lzh',
                    $action: 'remove'
                }]
            };
            myChart.setOption(option);
        } else {
            hideProjectDetail();
            g_project_selected = [];
            g_selected_links = [];
            option.series[2].data = [];
            option.series[3].data = [];
            option.graphic = {
                elements: [{
                    id: 'popup-proj1',
                    $action: 'remove'
                }]
            };
            myChart.setOption(option);
        }
    }
}

function register() {
    jzcode.event.registerEvent('show-proj-0', function () {
        s5_interactive.showLZH(false);
        s5_interactive.showProj0(!s5_interactive.isShowProj0);
    });

    jzcode.event.registerEvent('show-proj-1', function () {
        s5_interactive.showLZH(false);
        s5_interactive.showProj1(!s5_interactive.isShowProj1);
    });
    jzcode.event.registerEvent('show-lzh', function () {
        s5_interactive.showProj0(false);
        s5_interactive.showProj1(false);
        s5_interactive.showLZH(!s5_interactive.isShowLZH);
    });
}